<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/banner.css">
    
</head>

<body>


    <div class="banner" id="a">
        <ul id="ul" class="u">
            <!-- <li class="show">1</li> -->

        </ul>
        <ol>
            <!-- <li class="dot active"></li> -->

        </ol>
        <p>
            <span class="prev">&lt;</span>
            <span class="next">&gt;</span>
        </p>
    </div>


    <div class="banner" id="b">
        <ul id="ul" class="u">
            <!-- <li class="show">1</li> -->

        </ul>
        <ol>
            <!-- <li class="dot active"></li> -->

        </ol>
        <p>
            <span class="prev">&lt;</span>
            <span class="next">&gt;</span>
        </p>
    </div>


   


    <script>

        function Banner(data , selector) {
            // 需要请求图片的数据
            this.imgArr = data ;  
            this.oBanner = document.querySelector(selector) ;
            this.oUl = this.oBanner.querySelector('ul') ;
            this.oOl = this.oBanner.querySelector('ol') ;

            // 动态生成图片  renderImg()
            this.renderImg() ;
            // 生成图片以后才会有li
            this.oLis1 = this.oUl.querySelectorAll('li') ;
            console.log(this.oLis1);
            this.oLis2 = this.oOl.querySelectorAll('li') ;


            this.t = null ;
            this.index = 0 ;


            this.autoplay();
            this.init()
        }


        // 动态生成图片  renderImg()
        Banner.prototype.renderImg = function() {
            let imgHTML = '' ;
            let dotHTML = '' ;
            this.imgArr.forEach( v => {
                imgHTML += `<li>${v}</li>`
                dotHTML += `<li class="dot"></li>`
            })
            this.oUl.innerHTML = imgHTML ;
            this.oOl.innerHTML = dotHTML ;

            // 给第一个li添加显示状态
           const oLis1 = this.oUl.querySelectorAll('li') ;
           const oLis2 = this.oOl.querySelectorAll('li') ;

           oLis1[0].classList.add('show') ;
           oLis2[0].classList.add('active') ;
        }


        // 自动播放
        Banner.prototype.autoplay = function() {
            this.t = setInterval(()=>{
                this.index++ ;
                if(this.index === this.oLis1.length) {
                    this.index = 0 ;
                }
                this.show() ;
            } , 1000)
        }


        // 显示某一张
        Banner.prototype.show = function() {
            this.oLis1.forEach((v , i) => {
                v.classList.remove('show') ;
                this.oLis2[i].classList.remove('active') ;
            })
            this.oLis1[this.index].classList.add('show') ;
            this.oLis2[this.index].classList.add('active') ;
        }


        // 点击切换
        Banner.prototype.init = function() {
            // 事件委托
            this.oBanner.onclick = e => {
                const ev = e || event ;
                const target = ev.target ;

                // 上翻页
                if(target.className === 'prev') {
                    clearInterval(this.t) ;
                    if(this.index === 0) {
                        this.index = this.oLis1.length ;
                    }
                    this.index-- ;
                    this.show() ;
                    return 
                }

                // 下翻页
                if(target.className === 'next') {
                    clearInterval(this.t) ;
                    if(this.index === this.oLis1.length - 1) {
                        this.index = -1 ;
                    }
                    this.index++ ;
                    this.show() ;
                    return 
                }
            }
        }




        const imgArr = [1,2,3,4,5]
        const b = new Banner(imgArr , '#a') ;


        const imgArr2 = [1,2,3,4]
        const b2 = new Banner(imgArr , '#b') ;

    </script>

</body>

</html>